<template>
  <el-container class="upload-container">
    <div class="upload-div">
      <el-header style="height:50px">
        <ul class="upload-header">
          <li class="uploadmanage-header-left-item" style="padding-left:10px">
            <router-link to="/uploadmanage/uploadmanagevideo">视频管理</router-link>
          </li>
          <li class="uploadmanage-header-left-item">
            <router-link to="/uploadmanage/uploadmanagearticle">专栏管理</router-link>
          </li>
          <li style="float:right;width:140px; padding-top: 18px;">
            <el-autocomplete
              class="inline-input"
              v-model="state1"
              :fetch-suggestions="querySearch"
              placeholder="全部分区"
              suffix-icon="el-icon-arrow-down"
              @select="handleSelect"
            ></el-autocomplete>
          </li>
          <li style="float:right;width:180px; padding-top: 18px;">
            <el-autocomplete
              class="inline-input"
              v-model="state2"
              :fetch-suggestions="querySearch"
              placeholder="排序方式"
              suffix-icon="el-icon-arrow-down"
              @select="handleSelect"
            ></el-autocomplete>
          </li>
          <li style="float:right;  padding-top: 18px;">
            <el-input placeholder="请输入内容" v-model="uploadSearch" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </li>
        </ul>
      </el-header>
      <el-divider></el-divider>
      <router-view></router-view>
      <el-main></el-main>
    </div>
  </el-container>
</template>

<script>
export default {
  name: "uploadmanage",
  data() {
    return { uploadSearch: "", restaurants: [], state1: "", state2: "" };
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      return [
        {
          value: "南拳妈妈龙虾盖浇饭",
          address: "普陀区金沙江路1699号鑫乐惠美食广场A13"
        }
      ];
    },
    handleSelect(item) {
      console.log(item);
    }
  },
  mounted() {
    this.restaurants = this.loadAll();
  }
};
</script>

<style scoped>
.upload-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 1400px;
  background-color: white;
}
.upload-div {
  position: absolute;
  top: 120px;
  background-color: rgb(255, 255, 255);
  border: solid 1px #e6e6e6;
  width: 80%;
}
.upload-header li {
  float: left;
  font-size: 20px;
  padding-top: 20px;
  padding-left: 40px;
}

.upload-header li:hover {
  color: rgb(97, 97, 243);
}
</style>


